<script setup lang="ts">
import carIcon from '@/assets/car.png'
import endIcon from '@/assets/end.png'
import startIcon from '@/assets/start.png'
import { getMedicalOrderLogistics } from '@/services/order'
import type { Logistics } from '@/types/order'
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

// 注意4：安全密钥需要配上，才能正常使用高德 JS API 提供的能力，否则路线规划出不来
window._AMapSecurityConfig = {
  securityJsCode: '21180c622a684d4be50fd9f93947b661'
}

const route = useRoute()

const logistics = ref<Logistics>()

let AMap: any
let map: any

onMounted(async () => {
  // 注意3：渲染是依赖请求响应数据的，所以一定要等待响应数据回来后再渲染
  const res = await getMedicalOrderLogistics(route.params.id as string)
  logistics.value = res.data

  console.log('[ logistics.value ] >', logistics.value)

  AMap = await AMapLoader.load({
    key: '23c83162b47ace3d82a5a286bcd0c2b4', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Driving', 'AMap.PlaceSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map = new AMap.Map('map', {
    mapStyle: 'amap://styles/whitesmoke',
    //设置地图容器id
    zoom: 12 //初始化地图级别
  })

  const driving = new AMap.Driving({
    policy: AMap.DrivingPolicy.LEAST_TIME,
    // 注意2：路线规划出来后，一定要绑定地图实例，不然不知道往哪里渲染
    map,
    // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
    showTraffic: false,
    // 是否隐藏标记点，默认不隐藏，会显示 起点、终点、途径点标记
    hideMarkers: true
  })

  if (
    logistics.value &&
    logistics.value.logisticsInfo &&
    logistics.value.logisticsInfo.length >= 2 // 因为必须至少要有两个坐标
  ) {
    const startLogistic = logistics.value.logisticsInfo[0]
    const endLogistic =
      logistics.value.logisticsInfo[logistics.value.logisticsInfo.length - 1]
    const carLogistic = logistics.value.currentLocationInfo

    const waypoints = logistics.value.logisticsInfo
      // 这个得到的是中间的途径点坐标集合
      .slice(1, -1)
      // 做一个数据映射，把对象映射成数组
      .map((v) => [v.longitude, v.latitude])

    const startLngLat = [startLogistic.longitude, startLogistic.latitude]
    const endLngLat = [endLogistic.longitude, endLogistic.latitude]
    const carLngLat = [carLogistic.longitude, carLogistic.latitude]

    driving.search(
      // 注意1：经纬度位置不能错，longitude：经度, latitude：纬度
      startLngLat,
      endLngLat,
      { waypoints }, // waypoints 格式形如：[ [经度, 纬度], [经度, 纬度], [经度, 纬度] ]
      () => {
        console.log('路线规划成功')

        // 创建覆盖物标记
        const createMarker = (
          // 元组：指定数组元素的类型
          position: string[],
          image: string,
          size: { w: number; h: number },
          offset: { x: number; y: number }
        ) => {
          return new AMap.Marker({
            map,
            position,
            // icon: startIcon // 如果直接给图片字符串，不支持大小配置
            icon: new AMap.Icon({
              // 图片地址
              image,
              // 指定的是图标可视区域的大小
              size: new AMap.Size(size.w, size.h),
              // 指定的图片本身大小
              imageSize: new AMap.Size(size.w, size.h)
              // 这个是配置图片在可视区的偏移量，并不是覆盖物本身的偏移量
              // imageOffset: new AMap.Pixel(-12.5, -15)
            }),
            // content: '起点'
            offset: new AMap.Pixel(offset.x, offset.y)
          })
        }

        // 创建起始图标
        createMarker(
          startLngLat,
          startIcon,
          { w: 25, h: 30 },
          { x: -12.5, y: -30 }
        )

        // 创建覆盖物标记
        // new AMap.Marker({
        //   map,
        //   position: startLngLat,
        //   // icon: startIcon // 如果直接给图片字符串，不支持大小配置
        //   icon: new AMap.Icon({
        //     // 图片地址
        //     image: startIcon,
        //     // 指定的是图标可视区域的大小
        //     size: new AMap.Size(25, 30),
        //     // 指定的图片本身大小
        //     imageSize: new AMap.Size(25, 30)
        //     // 这个是配置图片在可视区的偏移量，并不是覆盖物本身的偏移量
        //     // imageOffset: new AMap.Pixel(-12.5, -15)
        //   }),
        //   // content: '起点'
        //   offset: new AMap.Pixel(-12.5, -30)
        // })

        // 创建结束图标
        createMarker(endLngLat, endIcon, { w: 25, h: 30 }, { x: -12.5, y: -30 })

        // new AMap.Marker({
        //   map,
        //   position: endLngLat,
        //   icon: new AMap.Icon({
        //     // 图片地址
        //     image: endIcon,
        //     // 指定的是图标可视区域的大小
        //     size: new AMap.Size(25, 30),
        //     // 指定的图片本身大小
        //     imageSize: new AMap.Size(25, 30)
        //     // imageOffset: new AMap.Pixel(-12.5, -15)
        //   }),
        //   // content: '终点'
        //   offset: new AMap.Pixel(-12.5, -30)
        // })
        // const carMarker = new AMap.Marker({
        //   map,
        // })

        // 创建车辆图标
        const carMarker = createMarker(
          carLngLat,
          carIcon,
          { w: 50, h: 30 },
          { x: -25, y: -30 }
        )

        setTimeout(() => {
          // 修改地图的缩放等级，注意：这个等级和 new AMap.Map 时配置的 zoom 单位不一样
          // map.setZoom(10)
          // 设置地图可视中心点
          // map.setCenter(carLngLat)
          // 直接根据当前地图上添加的覆盖物来聚焦
          map.setFitView(carMarker)
        }, 2000)
      }
    )
  }
})

const searchKeywords = ref('')
const showSearchInput = ref(false)
const showSearchResult = ref(false)
let placeSearch: any
const onSearch = () => {
  if (!placeSearch) {
    placeSearch = new AMap.PlaceSearch({
      pageSize: 5, // 单页显示结果条数
      pageIndex: 1, // 页码
      city: '长沙市', // 兴趣点城市
      // citylimit: true, //是否强制限制在设置的城市内搜索
      map: map, // 展现结果的地图实例
      panel: 'searchResult', // 结果列表将在此容器中进行展示。
      autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    })

    placeSearch.on('listElementClick', () => {
      console.log('[ hehe ] >')
      showSearchResult.value = false
    })
  }

  if (!searchKeywords.value) {
    showSearchInput.value = false
    return
  }

  showSearchResult.value = true

  placeSearch.search(searchKeywords.value)

  showSearchInput.value = false
  searchKeywords.value = ''
}
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span v-if="!showSearchInput" @click="showSearchInput = true">{{
          logistics?.statusValue
        }}</span>
        <van-field
          v-else
          v-model="searchKeywords"
          autofocus
          @keyup.enter="onSearch"
          @blur="showSearchInput = false"
          style="height: 50px"
          :border="false"
          input-align="center"
          placeholder="输入位置回车搜索"
        ></van-field>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">
          {{ logistics?.statusValue }} 预计{{ logistics?.estimatedTime }}送达
        </p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>

      <div v-if="showSearchResult && !showSearchInput" id="searchResult"></div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;

  #searchResult {
    overflow-y: auto;
    width: 355px;
    border-radius: 4px;
    height: 300px;
    position: absolute;
    left: 10px;
    top: 56px;
    z-index: 999;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
  }

  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
